<template>
  <div class="main-app">
    <el-form ref="form" :model="form" label-width="220px" style="margin-top: 20px;">
      <el-row>
        <el-col :span="10">
          <el-form-item label="废物名称:">
            <el-input v-model="form.name" disabled />
          </el-form-item>
          <el-form-item label="废物类别:">
            <el-input v-model="form.categoryContent" disabled />
          </el-form-item>
          <el-form-item label="危险特性:">
            <el-input v-model="form.characteristicContent" disabled />
          </el-form-item>
          <el-form-item label="容器类别:">
            <el-input v-model="form.containerCategory" disabled />
          </el-form-item>
          <el-form-item label="废物形态:">
            <el-input v-model="form.physicalProperties" disabled />
          </el-form-item>
          <el-form-item label="禁忌与应急措施:">
            <el-input v-model="form.safetyPrecautions" disabled />
          </el-form-item>
          <el-form-item label="库存量(吨):">
            <el-input v-model="form.inAmount" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="废物代码:" prop="wasteCode">
            <el-input v-model="form.codeId" disabled />
          </el-form-item>
          <el-form-item label="危害成分:">
            <el-input v-model="form.hazardousSubstancesName" disabled />
          </el-form-item>
          <el-form-item label="来源及生产工序:">
            <el-input v-model="form.processContent" disabled />
          </el-form-item>
          <el-form-item label="主要成分:">
            <el-input v-model="form.mainComponents" disabled />
          </el-form-item>
          <el-form-item label="危险标语:">
            <el-input v-model="form.termContent" disabled />
          </el-form-item>
          <el-form-item label="废物安全告知卡:">
            <el-form-item>
              <el-button type="primary" icon="el-icon-view" @click="ViewFile('安全告知卡附件', `${form.securityCardUrlList}`)">
                点击查看附件</el-button>
            </el-form-item>
          </el-form-item>

        </el-col>

      </el-row>
      <el-form-item label="描述:">
        <el-input v-model="form.remarks" type="textarea" :rows="4" disabled style="width: 81%;" />
      </el-form-item>
      <el-row />
    </el-form>
    <el-row style="margin-top: 40px; text-align: center">
      <el-form :inline="true" class="form-inline">

        <el-form-item>
          <el-button @click="cancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <div class="dialog_diy">
      <el-dialog :visible.sync="dialogVisible" width="70%" style="margin-top: -100px;" @close="closeDialog">
        <div slot="title" style="background:#1890FF;color: white;">
          <div style="padding:15px 20px;">{{ picTitle }}</div>
        </div>
        <el-form ref="form" style="margin-top: 15px;" :model="form">
          <div class="block">
            <el-carousel height="700px" style="text-align: center;">
              <el-carousel-item v-for="item in urls" :key="item">
                <el-image style="height: 100%; " fit="scale-down" :src="item" />
              </el-carousel-item>
            </el-carousel>
          </div>
          <el-row style="margin-top: 20px; text-align: center">
            <el-form :inline="true" class="form-inline">
              <el-form-item>
                <el-button @click="closeDialog">返 回</el-button>
              </el-form-item>
            </el-form>
          </el-row>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  // ContainerType,
  PhysicalProperties
} from "../../../utils/resource";
import {
  getWastObjInfoById
} from '../../../api/warehouse.js';
export default {
  data() {
    return {
      form: {
        category: "",
        type: "",
        name: "",
        containerType: "",
        physical: "",
        safetyPrecautions: "",
        wasteCode: "",
        substance: "",
        sourceProcess: "",
        mainComponents: "",
        safetyNotificationCard: "",
        describe: "",
        status: "",
        termContent: ""
      },
      typeOptions: [],
      wasteOptions: [],
      urls: [
        'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
        'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
        'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
        'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
        'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
        'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
        'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'
      ],
      picTitle: "废物安全告知卡附件",

      dialogVisible: false,

      id: "",
      codeContent: "",
      categoryId: "",
      categoryContent: "",
    };
  },
  async created() {
    const {
      id
    } = this.$route.params;
    if (id) {
      await this.getWastObjInfoById(id);
      this.id = id;
    }
  },
  methods: {
    async getWastObjInfoById(id) {
      const {
        data
      } = await getWastObjInfoById(id);
      this.form = data;
      if (data) {
        var objs = PhysicalProperties.find((p) => p.value ===
            `${this.form.containerCategory}`);
        if (objs) {
          this.form.containerCategory = objs.label;
        } else {
          this.form.containerCategory = "未填写";
        }

        var obj = PhysicalProperties.find((p) => p.value ===
            `${this.form.physicalProperties}`);
        if (obj) {
          this.form.physicalProperties = obj.label;
        } else {
          this.form.physicalProperties = "未填写";
        }
      }
    },
    async ViewFile(title, url) {
      this.picTitle = title;
      this.urls = url.split(',');
      this.dialogVisible = true;
    },
    closeDialog() {
      this.dialogVisible = false;
    },
    cancel() {
      this.$router.push(`/warehouse/stock/index_wastObjList/${this.form.codeId}`);
    },
  },
};
</script>

<style lang="scss" scoped>
  .dialog_diy {
    ::v-deep .el-dialog__wrapper {

      // eslint-disable-line
      .el-dialog {

        .el-dialog__body {
          padding: 0px;
        }

        .el-dialog__header {
          padding: 0px;
        }

        .el-dialog__headerbtn {
          top: 5px;
          right: 5px;
          padding-top: 10px;
        }

        .el-dialog__headerbtn .el-dialog__close {
          color: #fff;
          height: 30px;
          width: 35px;
        }

        .el-dialog__headerbtn .el-dialog__close:hover {
          color: gray;
        }
      }
    }
  }
</style>
